<template>
  <div>
    <el-container>
      <el-header>
        <el-row style="height: 40px;"></el-row>
        <el-row class="money-title">
          请选择今日的财政收入支出情况：
        </el-row>
        <el-row>
          <el-col :span="6" :offset="2">
            <el-button type="success" @click="dialogFormVisible1 = true" round>收入</el-button>
          </el-col>
          <!--          弹窗-->
          <el-dialog title="收入" :visible.sync="dialogFormVisible1" width="420px">
            <!--            表单-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <!--              备注-->
              <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-input v-model="ruleForm.remark"></el-input>
              </el-form-item>
              <!--金额-->
              <el-form-item label="收入金额" :label-width="formLabelWidth" prop="amount">
                <el-input v-model="ruleForm.amount"></el-input>
              </el-form-item>
              <!--              日期-->
              <el-form-item label="活动时间" required :label-width="formLabelWidth">
                <el-col :span="11">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="line" :offset="1" :span="1">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="time">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.time" style="width: 100%;"></el-time-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm',1)">确 定</el-button>
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>

          <el-col :span="7">
            <el-button type="success" @click="dialogFormVisible2 = true" round>支出</el-button>
          </el-col>

          <!--          弹窗-->
          <el-dialog title="支出" :visible.sync="dialogFormVisible2" width="420px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <!--              备注-->
              <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-input v-model="ruleForm.remark"></el-input>
              </el-form-item>
              <!--              消费形式-->
              <el-form-item label="消费形式" required :label-width="formLabelWidth">
                <el-col :span="11">
                  <el-form-item prop="playId">
                    <el-select v-model="ruleForm.playId" placeholder="消费类型">
                      <el-option label="餐饮" value="1"></el-option>
                      <el-option label="娱乐" value="2"></el-option>
                      <el-option label="投资" value="3"></el-option>
                      <el-option label="其他" value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col class="line" :offset="1" :span="1">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="moneyId">
                    <el-select v-model="ruleForm.moneyId" placeholder="支付手段">
                      <el-option label="现金" value="1"></el-option>
                      <el-option label="支付宝" value="2"></el-option>
                      <el-option label="微信" value="3"></el-option>
                      <el-option label="银行卡" value="4"></el-option>
                      <el-option label="其他" value="5"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <!--金额-->
              <el-form-item label="消费金额" :label-width="formLabelWidth" prop="amount">
                <el-input v-model="ruleForm.amount"></el-input>
              </el-form-item>
              <!--日期-->
              <el-form-item label="活动时间" required :label-width="formLabelWidth">
                <el-col :span="11">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="line" :offset="1" :span="1">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="time">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.time" style="width: 100%;"></el-time-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm',2)">确 定</el-button>
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>

          <el-col :span="5" :offset="3">
            <el-button type="text" @click="table = true">详细数据</el-button>
            <!--            表格-->
            <el-drawer
                title="详细数据"
                :visible.sync="table"
                direction="btt"
                size="50%">
              <el-table stripe :data="gridData" class="money-width" height="320">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="类型 :">
                        <span>{{ props.row.financialId }}</span>
                      </el-form-item>
                      <el-form-item label="金额 :">
                        <span>{{ props.row.amount }}</span>
                      </el-form-item>
                      <el-form-item label="星期 :">
                        <span>{{ props.row.week }}</span>
                      </el-form-item>
                      <el-form-item label="日期 :">
                        <span>{{ props.row.date }}</span>
                      </el-form-item>
                      <el-form-item label="消费类型 :">
                        <span>{{ props.row.playId }}</span>
                      </el-form-item>
                      <el-form-item label="支付手段 :">
                        <span>{{ props.row.moneyId }}</span>
                      </el-form-item>
                      <el-form-item label="备注 :">
                        <span>{{ props.row.remark }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="" prop="financialId"></el-table-column>
                <el-table-column label="金额" prop="amount"></el-table-column>
                <el-table-column label="日期" prop="date"></el-table-column>
              </el-table>
            </el-drawer>
          </el-col>
        </el-row>
        <br>
        <hr>
      </el-header>

      <el-main style="padding-top: 100px;">
        <div id="myChart" :style="{width: '400px', height: '400px'}">
        </div>
        <router-view></router-view>
        <el-tabs stretch>
          <el-tab-pane>
            <span slot="label" @click="test(1)">七日内消费情况</span>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label" @click="test(2)">消费类型</span>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label" @click="test(3)">支付类型</span>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "Money",
  data() {
    return {
      ruleForm: {
        userId: '',
        remark: '',
        amount: '',
        date: '',
        time: '',
        playId: '',
        moneyId: '',
        financialId: ''
      },
      rules: {
        amount: [
          {required: true, message: '请输入金额', trigger: 'blur'}
        ],
        date: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        time: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        playId: [
          {required: true, message: '请选择消费类型', trigger: 'change'}
        ],
        moneyId: [
          {required: true, message: '请选择支付手段', trigger: 'change'}
        ]
      },
      formLabelWidth: '80px',
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      table: false,
      gridData: [
        {
          financialId: '',
          week: '',
          remark: '',
          amount: '',
          date: '',
          playId: '',
          moneyId: ''
        }
      ]
    };
  },
  mounted() {
    this.tableView();
    this.test(1);
  },
  methods: {
    submitForm(formName, i) {
      this.$refs[formName].validate(async () => {
        this.ruleForm.financialId = i;
        this.ruleForm.userId = sessionStorage.getItem("token");
        //向后端要数据
        const {data: res} = await this.$http.post("http://localhost:9000/money/addMoney", this.ruleForm);

        if (res === "ok") {
          //成功弹窗
          this.$notify({
            title: '成功',
            message: '提交成功',
            type: 'success'
          });
          this.tableView();
          this.$refs[formName].resetFields();
          if (i === 1) {
            this.dialogFormVisible1 = false
          }
          if (i === 2) {
            this.dialogFormVisible2 = false
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: '提交失败'
          });
          return false;
        }
      });
    },
    //查询详细信息
    tableView() {
      this.gridData.length = 0;
      this.$http.post("http://localhost:9000/money/selectMoneyOfId", {
        userId: sessionStorage.getItem("token")
      }).then((res) => {
        console.log(res);
        let ids = ["收入", "支出"]
        let weeks = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
        let plays = ["餐饮", "娱乐", "投资", "其他"]
        let moneys = ["现金", "支付宝", "微信", "银行卡", "其他"]
        if (res.data.length > 0) {
          for (const re of res.data) {
            this.gridData.push({
              financialId: ids[re.financialId - 1],
              week: weeks[re.week - 1],
              remark: re.remark,
              amount: re.amount,
              date: re.financialDate.split("T")[0],
              playId: plays[re.playId - 1],
              moneyId: moneys[re.moneyId - 1]
            })
          }
        } else {
          console.log("查询为空")
        }
      }).catch(() => {
        console.log("查询失败")
      })
    },
    test(num) {
      if (num === 1) {
        this.$router.push('/polyline');
      }
      if (num === 2) {
        this.$router.push("/pie");
      }
      if (num === 3) {
        this.$router.push("/bar");
      }
    }
  }
}
</script>

<style scoped>
.money-title {
  padding-bottom: 20px
}

.money-width {
  width: 100%
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
